<template>
  <div class='container'>
    <h2>生成单个短链接</h2>
    <!-- 基础表单 -->
    <a-form :model='form' :style="{width:'700px',margin: '0 auto'}">
      
      <a-form-item field='originalUrl' label='原始长链接' validate-trigger='input' required>
        <a-input
          v-model='form.originalUrl'
          placeholder='请输入您的网址,如https://weixin.qq.com'
        />
      </a-form-item>
      
      <a-form-item field='description' label='链接用途' validate-trigger='input' :required='false'>
        <a-textarea
          style='height: 110px;'
          v-model='form.description'
          :max-length='300'
          placeholder='请输入链接描述/文案, 以${}代表短链' allow-clear
        />
        <template #extra>
          <a-link>查看示例</a-link>
        </template>
      </a-form-item>
      
      <a-form-item field='description' label='网站图标' validate-trigger='input' :required='false'>
        <a-input
          v-model='form.description'
          placeholder='请输入网站图标' allow-clear
        />
      </a-form-item>
      
      <a-form-item field='group' label='短链分组' validate-trigger='input' required>
        <a-select v-model='form.group' :style="{width:'400px'}" placeholder='请选择分组'>
          <a-option v-for='g in groupList'>{{ g.name }}</a-option>
        </a-select>
      </a-form-item>
      
      <a-form-item field='validity' label='有效期' validate-trigger='input' required>
        <a-row>
          <a-date-picker
            v-if='!permanent'
            style='width: 400px; margin-right: 24px; margin-bottom: 24px;'
            show-time
            v-model='form.validity'
            :shortcuts="[
            {label: '7天',value: () => dayjs().add(7, 'day')},
            {label: '30天',value: () => dayjs().add(30, 'day'),}]"
          />
          <a-button status="success" size='small' shape="round">设置永久</a-button>
        </a-row>
      </a-form-item>
      
      <a-form-item>
        <a-button type='primary' style='width: 300px;'>创建</a-button>
      </a-form-item>

    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import dayjs from 'dayjs';


const form = reactive({
  originalUrl: '',
  description: '',
  group: '',
  validity: ''
});

const permanent = ref(false)

const groupList = [
  {
    gid: 'SDF11',
    name: '11营销活动'
  },
  {
    gid: 'SDF25',
    name: '618营销活动'
  }
];



</script>

<style scoped lang='less'>
.container {
  margin: 20px 10px;
  padding: 10px 20px 40px 20px;
  background-color: #fff;
}
</style>